<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="panel-body">
        <h3>用户信息<a href="/shijiu.php/chase/real_order/index" class="btn btn-danger pull-right">返回列表</a></h3>
        <div class="fixed-table-body">
            <table id="" class="table table-striped table-bordered table-hover table-nowrap" data-operate-edit="1" data-operate-del="1" width="100%">
                <thead>
                <tr>
                    <th style="text-align: center; vertical-align: middle; ">
                        <div class="th-inner ">用户昵称</div>
                        <div class="fht-cell"></div>
                    </th>
                    <th style="text-align: center; vertical-align: middle; ">
                        <div class="th-inner ">会员等级</div>
                        <div class="fht-cell"></div>
                    </th>
                    <th style="text-align: center; vertical-align: middle; ">
                        <div class="th-inner ">用户手机</div>
                        <div class="fht-cell"></div>
                    </th>
                </tr>
                </thead>
                <tbody data-listidx="0">
                <tr data-index="0" class="selected">
                    <td style="text-align: center; vertical-align: middle; ">{$row->username}</td>
                    <td style="text-align: center; vertical-align: middle; ">{if $row->user}{$row->user->vip}{/if}</td>
                    <td style="text-align: center; vertical-align: middle; ">{$row->phone}</td>
                </tr>
                </tbody>
            </table>
        </div>

        <h3>服务信息</h3>
        <div class="fixed-table-body">
            <table id="" class="table table-striped table-bordered table-hover table-nowrap" data-operate-edit="1" data-operate-del="1" width="100%">
                <thead>
                <tr>
                    <th style="text-align: center; vertical-align: middle; " >
                        <div class="th-inner ">分类</div>
                        <div class="fht-cell"></div>
                    </th>
                    <th style="text-align: center; vertical-align: middle; ">
                        <div class="th-inner ">服务名字</div>
                        <div class="fht-cell"></div>
                    </th>
                    <th style="text-align: center; vertical-align: middle; ">
                        <div class="th-inner ">设计师/造型师</div>
                        <div class="fht-cell"></div>
                    </th>
                    <th style="text-align: center; vertical-align: middle; ">
                        <div class="th-inner ">数量</div>
                        <div class="fht-cell"></div>
                    </th>
                    <th style="text-align: center; vertical-align: middle; ">
                        <div class="th-inner ">单价</div>
                        <div class="fht-cell"></div>
                    </th>
                    <th style="text-align: center; vertical-align: middle; ">
                        <div class="th-inner ">总价</div>
                        <div class="fht-cell"></div>
                    </th>
                </tr>
                </thead>
                <tbody data-listidx="0">
                {foreach name="$row.service" item="vo"}
                <tr data-index="0" class="selected">
                    <td style="text-align: center; vertical-align: middle; ">{if $vo->category}{$vo->category->title}{/if}</td>
                    <td style="text-align: center; vertical-align: middle; ">{$vo->service_name}</td>
                    <td style="text-align: center; vertical-align: middle; ">{if $vo->design}{$vo->design->nickname}{/if}</td>
                    <td style="text-align: center; vertical-align: middle; ">{$vo->num}</td>
                    <td style="text-align: center; vertical-align: middle; ">{$vo->price}</td>
                    <td style="text-align: center; vertical-align: middle; ">{$vo->total_money}</td>
                </tr>
                {/foreach}
                </tbody>
            </table>
        </div>
    </div>

    <div class="payment">
        <h3>收款</h3>
        <div class="mt-20">收款方式：
            <label class="mr-10 am-radio-inline"><input name="row[payment]" type="radio" value="1" {if $row.payment != 3}checked{/if}/>现金支付 </label>
            <label class="mr-10 am-radio-inline"><input name="row[payment]" type="radio" value="2" {if $row.payment == 2}checked{/if}/>余额支付 </label>
            <label class="mr-10 am-radio-inline"><input name="row[payment]" type="radio" value="3" {if $row.payment == 3}checked{/if}/>扫码支付 </label>
        </div>
        <div class="mt-20">会员优惠：<input type="number" name="row[vip_amount]" value="{$row->vip_amount}" readonly></div>

        <div class="mt-20">优惠券：
            {if $user_coupons}
            {foreach name="$user_coupons" item="vo"}
            <label class="mr-10 am-radio-inline "><input name="row[user_coupon_id]" type="radio" value="{$vo->id}" onclick="coupon({$vo->type}, {$vo->discount_amount})" {in name="vo.id" value="$row.user_coupon_id"}checked{/in}>{$vo->coupon_name} </label>
            {/foreach}
            {else}
            <input name="row[user_coupon_id]" type="hidden" value="0" placeholder="">暂无可用的优惠券
            {/if}

        </div>
        <div class="mt-20">优惠金额：<input type="number" name="row[discount_amount]" value="{$row->discount_amount}" readonly></div>
        <div class="mt-20">合计金额：<input type="number" name="row[total_amount]" value="{$row->total_amount}" readonly></div>
        <div class="mt-20">实收金额：<input type="number" name="row[real_amount]" step="0.01" min="0" value="{$row->real_amount}"></div>
        {if $row->status == 1 && $row->payment !=3}
        <div  style="margin-top: 40px">
            <button class="btn btn-success">确认</button>
        </div>
        {/if}
        <div class="mt-20 code" {if $row->status == 1 && $row->payment == 3}display{else}hidden{/if}>付款码：
                <img src="{$row->code}">
        </div>
    </div>

</form>
<script>
    //优惠券
    function coupon(type, discount) {
        var vip_amount = $("input[name='row[vip_amount]']").val();
        var total_amount = $("input[name='row[total_amount]']").val();
        console.log(type + '===' + discount)
        if (type == 1) {
            $("input[name='row[discount_amount]']").val(discount)
        }
        if (type == 2) {
            discount_amount = (total_amount - vip_amount) * discount / 10
            $("input[name='row[discount_amount]']").val(discount_amount.toFixed(2))
        }
        var discount_amount = $("input[name='row[discount_amount]']").val();
        var real_amount = total_amount - vip_amount - discount_amount;
        real_amount = real_amount > 0 ? real_amount.toFixed(2) : 0;
        $("input[name='row[real_amount]']").val(real_amount);
    }

    //单选框切换事件
    // $(document).ready(function() {
    //     $("input[type='radio'][name='row[payment]']").change(function () {
    //         console.log(1111)
    //     })
    // })



</script>
<style>
    #add-form{
        margin-right: 40px;
        background: white;
        padding: 20px;
    }
    .dis-fex{
        display: flex;
    }
    .flex-x-space{
        justify-content:space-between;
    }
    .name{
        font-size: 24px;
        font-weight:bold;
    }
    .pt-50{
        padding-bottom: 50px;
    }
    .inputbox>div{
        padding-bottom: 20px;
    }
    input{
        text-align: center;
    }
    .fw-bold{
        font-weight: bold;
    }
    table{
        text-align: center;
    }
    th{
        text-align: center !important;
    }
    .tablebox{
        margin-top: 20px;
    }
    .fs-0{
        font-size: 0;
    }
    .fs-12{
        font-size:12px;
    }
    select{
        width: 60%;
    }
    td{
        padding-bottom:20px;
    }
    .add{
        float: right;
        margin-right: 5px;
        margin-bottom: 40px;
    }
    .m-r30{
        margin-right: 30px;
        display: inline-block;
        margin-top: 20px;
    }
    .mt-20{
        margin-top: 20px;
    }
    .mr-10{
        margin-right: 10px;
    }
    .code img{
        width: 250px;
        height: 250px;
        margin-left: 100px;
    }
</style>